<template>
  <div class="action-btn-wp">
    <el-popover
        ref="popover"
        placement="left"
        width="400"
        trigger="click"
        >
      <el-button type="text" size="small" slot="reference" @click.stop.prevent="handelClick">{{!unreceived?"未收到货":"物流详情"}}</el-button>

      <div class="popper-box" v-loading="loading" element-loading-text="查询中">
        <header>
          <div v-if="express.img" class="img-wp">
            <img :src="processImg(abs_img)">
          </div>
          <div class="info">
            <p>{{express.goodsName}}</p>
            <p>
              <span>{{express.logisticsCompany}}</span>
              <span>{{express.expressNo}} </span>
              <!--<el-button type="text" size="small" class="btn" @click.stop.prevent="changeExpress()">单号有误？</el-button>-->
            </p>
          </div>
        </header>
        <div class="body">
          <div v-if="express.expressDetails && express.expressDetails.length>0">
            <div class="header">物流详情：</div>
            <div class="detail">
              <ul class="express-list">
                <li v-for="(item,index) in express.expressDetails" :key="index" :class="{'new':index==0}">
                  <span v-if="index==0" class="tag">最新</span>
                  <div>{{item.ftime}}</div>
                  <div>{{item.status}} {{item.context}}</div>
                </li>
              </ul>
            </div>
          </div>
          <empty v-if="!express.expressDetails || express.expressDetails.length<=0">暂无物流信息</empty>
        </div>
        <footer v-if="!unreceived">
          <el-form>
            <el-form-item>
              <el-checkbox v-model="checked">我已仔细确认，确实没有收到货</el-checkbox>
            </el-form-item>
            <el-form-item>
              <div class="btn-wp">
                <el-button class="btn" type="primary" @click="onSubmit" :disabled="!checked" :loading="submiting">我未收到货</el-button>
                <el-button class="btn" @click="cancelSubmit">取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </footer>
      </div>

    </el-popover>


  </div>
</template>

<script>
  import {osshost} from '@/api/util/fetch';
  import {getOrderInfoExpress,orderUnreceived} from '@/api/order';

  import Empty from '@/components/Empty';

  export default {
    name: 'actionUnreceived', //未收到货
    components:{
      'empty':Empty,
    },
    props:{
      scope:{
        type:Object,
        default:()=>{},
      },
      scopeId:{
        type:String,
        default:'id'
      }
    },
    data(){
      return {
        loading:false,
        submiting:false, //正在提交

        express:{ //物流信息
          expressNo:'', //快递号
          goodsName:'', //商品名称
          img:'',//商品图片
          logisticsCompany:'', //快递渠道
          expressDetails:[
            /*{
              time:'', //物流更新时间
              ftime:'', //格式化后的物流时间
              status:'', //物流状态
              context:'', //物流描述
            },*/
            /*{
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            },
            {
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            },
            {
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            }*/

          ],//快递详情
        },
        checked:false,
      }
    },
    computed:{
      unreceived()
      {
        return this.scope.row.state === 'returned_unreceived';
      },
      abs_img()
      {
        if(this.express && this.express.img)
        {
          if(/(http|https):\/\//.test(this.express.img))
          {
            return this.express.img;
          }

          return osshost + this.express.img;

        }

        return '';
      },
    },
    methods: {
      handelClick()
      {
        //先关闭所有pop，防止窗口重叠
        document.querySelector("#app").click();

        let row = this.scope.row || {};
        let data = {
          id:row[this.scopeId],
          type:'merchant',
        };

        this.loading = true;
        getOrderInfoExpress(data).then(resp=>{
          this.express = resp.data || {};

          this.loading = false;
        }).catch(err=>{

          this.loading = false;

        });

      },
      onSubmit() //提交未收货
      {
        if(!this.checked || this.submiting)
        {
          return;
        }

        this.$confirm('提交后此订单将由蜜宝管理中心进行跟踪处理。', '未收到货？', {
          confirmButtonText: '继续提交',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.submiting = true;

          orderUnreceived({id:this.scope.row[this.scopeId]}).then(resp=>{

            let rows = this.scope.rows;
            let index = this.scope.index;
            rows.splice(index,1);
            this.$emit('unreceived-success');

            this.submiting = false;

          }).catch(err=>{
            this.submiting = false;

          });

        }).catch(() => {
          
        });

      },
      cancelSubmit()
      {
        document.querySelector("#app").click();
      },
      processImg(url)
      {
        if(url && url !=='undefined')
        {
          return url + '?x-oss-process=image/resize,w_100';
        }

        return '';
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../styles/mixin.scss";

  .popper-box
  {
    > header
    {
      padding: 10px;
      border-bottom: 1px solid #eee;
      @include clearfix;

      .img-wp
      {
        float: left;
        width: 40px;
        height: 40px;
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 3px;
        img
        {
          width: 100%;
          height: 100%;
          border: none;
          vertical-align: top;
        }
      }

      .info
      {
        margin-left: 50px;
        p
        {
          margin: 5px 0 0 0;
          .btn
          {
            margin-left: 10px;
            text-decoration: underline;
          }
        }
      }

    }

    > .body
    {
      padding: 10px;

      .header
      {
        font-size: 14px;

      }

      .detail
      {
        padding: 10px;

        .express-list
        {
          max-height: 200px;
          overflow: auto;
          list-style: none;
          padding: 0;
          margin: 0;

          li
          {
            position: relative;
            padding: 10px 10px 10px 58px;
            margin-right: 20px;
            font-size: 12px;

            + li
            {
              border-top: 1px solid #eee;
            }

            .tag
            {
              display: none;
              position: absolute;
              left: 20px;
              top: 50%;
              padding: 2px;
              margin-top: -9px;
              color: #fff;
              background: red;
            }

            &:before
            {
              position: absolute;
              content: "";
              left: 10px;
              top: 0;
              bottom: 0;
              border-left: 2px solid #eee;
              z-index: 0;
            }
            &:after
            {
              content: "";
              position: absolute;
              left: 6px;
              top: 50%;
              margin-top: -5px;
              width: 10px;
              height: 10px;
              background: #20a0ff;
              border: 2px solid #fff;
              z-index: 1;
              border-radius: 50%;
              box-sizing: border-box;
            }

            &.new
            {
              color: red;
              &:after
              {
                background: red;
              }

              .tag
              {
                display: block;
              }
            }
          }
        }
      }
    }

    > footer
    {
      padding: 10px;
      border-top: 1px solid #eee;
      .btn-wp
      {
        text-align: center;
        .btn
        {
          margin: 0 15px;
        }
      }
    }
  }
</style>